<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约入校</title>
    <link rel="shortcut icon" href="./images/touxiang.jpg">
    <link rel="stylesheet" href="./css/yuyueruxiao.css">
</head>

<body>
    <table>
        <caption>预约入校申请表</caption>
        <form action="">

        </form>
        <tbody>
            <tr>
                <th>姓名</th>
                <th colspan="2"><input type="text" name="fname" placeholder="请输入姓名"></th>
            </tr>
            <tr>
                <th>性别</th>
                <th><input type="radio" placeholder="" name="sex">男</th>
                <th><input type="radio" placeholder="" name="sex">女</th>
            </tr>
            <tr>
                <th>手机</th>
                <th colspan="2"><input type="number" oninput="if(value.length>11)value=value.slice(0,11)" name="mobile"
                        placeholder="请输入手机号" />
                </th>
            </tr>
            <tr>
                <th>省份证</th>
                <th colspan="2"><input type="number" oninput="if(value.length>18)value=value.slice(0,18)" name="mobile"
                        placeholder="请输入省份证" />
                </th>
            </tr>
            <tr>
                <th>同行人姓名</th>
                <th colspan="2"><input type="text" name="lname" placeholder="请输入同行人姓名"></th>
            </tr>
            <tr>
                <th>车辆号牌</th>
                <th colspan="2"><input type="text" name="car" placeholder="车辆号牌"></th>
            </tr>
            <tr>
                <th>来访日期</th>
                <th colspan="2"><input type="date" name="comedate"></th>
            </tr>
            <tr>
                <th>来访时间</th>
                <th colspan="2"><input type="time" name="cometime"></th>
            </tr>
            <tr>
                <th rowspan="3">来访原因</th>
                <th><input type="checkbox" name="Reason" id="">公务</th>
                <th><input type="checkbox" name="Reason" id="">会友</th>
            </tr>
            <tr>
                <th><input type="checkbox" name="Reason" id="">游玩</th>
                <th><input type="checkbox" name="Reason" id="">考试</th>
            </tr>
            <tr>
                <th><input type="checkbox" name="Reason" id="">培训</th>
                <th><input class="other" type="checkbox" name="Reason" id="">其他</th>
            </tr>
            <tr>
                <th colspan="3" style="display: none;" class="textarea" headers="0">
                        <textarea name="other" id="" placeholder="请输入其他来访原因"></textarea>
                </th>
            </tr>
        </tbody>
    </table>
</body>
<script>
    let other = document.querySelector('.other');
    let textarea = document.querySelector('.textarea');
    other.onclick = () => {
        other.checked ? textarea.style = "none" : textarea.style.display = "none";
    }
</script>

</html>